const electron = require("electron");
const Menu = electron.remote.Menu;

class NativeMenu {

  run(context: EditorApiSystem) {
    let template = [
      {
        label: "File",
        submenu: [
          {
            label: "Save", click: () => {
              context.executeCommand("Save");
            }
          }
        ]
      },
      {
        label: 'Edit',
        submenu: [{
          label: 'Copy ',
          accelerator: 'CmdOrCtrl+C',
          role: 'copy'
        }, {
          label: 'Paste',
          accelerator: 'CmdOrCtrl+V',
          role: 'paste'
        }
        ]
      },
      {
        label: 'Window ',
        role: 'window',
        submenu: [{
          label: 'Minimize',
          accelerator: 'CmdOrCtrl+M',
          role: 'minimize'
        }, {
          label: 'Close',
          accelerator: 'CmdOrCtrl+W',
          role: 'close'
        }, {
          label: '切换开发者工具',
          accelerator: (function () {
            if (process.platform === 'darwin') {
              return 'Alt+Command+I'
            } else {
              return 'Ctrl+Shift+I'
            }
          })(),
          click: function (item, focusedWindow) {
            if (focusedWindow) {
              focusedWindow.toggleDevTools()
            }
          }
        }, {
          type: 'separator'
        }]
      },
      {
        label: 'Help',
        role: 'help',
        submenu: []
      }
    ]
    const menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)
  }
}

class HierarchyPanel {

  private tree: InspireTree;
  private context: EditorApiSystem;


  run(context: EditorApiSystem) {
    this.context = context;
    const customContainer = document.getElementById("hierarchyPanel");
    customContainer.style.color = "#fefefe";
    this.tree = new InspireTree({
      data: []
    } as any);
    new InspireTreeDOM(this.tree, {
      target: customContainer
    });
    this.tree.on("node.selected", (value) => {
      this.context.executeCommand("SelectGameObject", value.uuid);
    })
  }
  update(data: HierarchyNode) {

    function buildTreeData(data: HierarchyNode): NodeConfig & { uuid: number } {
      return { text: data.name, children: data.children.map(buildTreeData), uuid: data.uuid }

    }
    const treeData = buildTreeData(data);
    this.tree.load([treeData]);
    this.tree.expandDeep();

  }
}

class InspectorPanel {
  private context: EditorApiSystem;
  run(context: EditorApiSystem) {
    this.context = context;
  }
  update(data: inspectorData) {

    this.clear();
    var gui = new dat.GUI({ autoPlace: false });
    var folder = gui.addFolder(data.name);
    folder.open();
    const head: any = [];
    head["name"] = data.name;
    const nameController = folder.add(head, "name");
    nameController.onChange((value) => {
      const nameGameObject = GameObject.getGameObject(data.uuid);
      folder.name = value;
      nameGameObject.id = value;
      const hierarchydata = getHierarchyData(core.root);
      hierarchyPanel.update(hierarchydata);
    })
    head["addEmptyGameObjectChild"] = ()=>{
      this.context.executeCommand("AddEmptyGameObjectChildToGameObject",{
        uuid:data.uuid
      })
    }
    folder.add(head,"addEmptyGameObjectChild");
    // head["delete"] = ()=>{
    //   this.context.executeCommand("deleteGameObject",{
    //     uuid:data.uuid
    //   })
    // }
    // folder.add(head,"delete");

    const deleteGameObjectFolder = folder.addFolder("deleteGameObject");
    head["delete"] = () => {
            this.context.executeCommand("DeleteGameObject", {
              uuid: data.uuid,
            });
          }
    deleteGameObjectFolder.add(head, "delete");

    for (let behaviour of data.behaviours) {
      if (!Behaviour.getBehaviour(behaviour.uuid).isDestroy) {
        const behaviourfolder = folder.addFolder(behaviour.name);
        behaviourfolder.open();
        const obj: any = [];
        for (let property of behaviour.properties) {
          obj[property.key] = property.value;
          const controller = behaviourfolder.add(obj, property.key);
          controller.onChange((value) => {
            this.context.executeCommand("ModifyBehaviourProperty", {
              uuid: behaviour.uuid,
              key: property.key,
              newValue: value
            })
            console.log(value);
          })
        }
        if (behaviourfolder.name != "Transform") {
          const deleteBehaviourFolder = behaviourfolder.addFolder("delateBehaviourFormGameObject");
          obj["delete"] = () => {
            this.context.executeCommand("DeleteBehaviourFormGameObject", {
              uuid: data.uuid,
              behaviourName: behaviour.name
            });
          }
          deleteBehaviourFolder.add(obj, "delete");

        }
      }


    }
    const controller = gui.add({
      addComponent: ""
    }, "addComponent", core.getAllBehaviourClassName());
    controller.onChange((value) => {
      this.context.executeCommand("AddBehaviourOnGameObject", {
        uuid: data.uuid,
        behaviourName: value
      })
    })
    const customContainer = document.getElementById("inspectorPanel");
    customContainer.appendChild(gui.domElement);
  }
  clear() {
    const customContainer = document.getElementById("inspectorPanel");
    for (const child of customContainer.children) {
      child.remove();
    }
  }
}

class ResourcePanel {
  private context: EditorApiSystem;
  run(context: EditorApiSystem) {
    this.context = context;
    const div = document.getElementById("resourcePanel");
    const scenes = core.configData.scenes;
    for (let scene of scenes) {
      const icon = new FileIcon();
      icon.create(scene);
      const view = icon.getView()
      div.appendChild(view);
      view.onclick = () => {
        if(confirm("保存当前场景？")){
          context.executeCommand("Save");
        }
        
        context.executeCommand("ChangeScene", scene);
      }
    }
  }
}

class FileIcon {
  private view = document.createElement("div");
  create(labelName: string) {
    const img = document.createElement("img");
    img.src = "./images/file.jpg";
    img.style.width = "64px";
    const label = document.createElement("p");
    label.innerText = labelName;
    label.style.color = "white";
    this.view.appendChild(img);
    this.view.appendChild(label);
  }
  getView() {
    return this.view;
  }
}

const nativeMune = new NativeMenu();


const hierarchyPanel = new HierarchyPanel();

const inspectorPanel = new InspectorPanel();
const resourcePanel = new ResourcePanel();
